<template>
  <div>
    <h4>关联的空间</h4>
    <div v-for="space in currentCommunity.spaces" :key="space.id" class="mini-space-card">
      <div class="flex align-items-center">
        <space-avatar :space="space" />
        <div class="m-l-10">
          <router-link class="title link" :to="`/${$rp.SPACES}/${space.id}`">
            {{ space.title }}
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import SpaceAvatar from '@/components/space-avatar';

export default {
  name: 'RelatedSpaces', // 当前社区关联的空间
  components: { SpaceAvatar },
  data() {
    return {
      spaces: [], // 我加入的空间
    };
  },
  computed: {
    ...mapState(['currentCommunity']),
  },
};
</script>

<style></style>
